<template>
	<div class="wan">
		<div class="blue">
			<div class="wanyi">
				<p>杭州玩乐</p>
				<span>像当地人一样，体验最本土的吃喝玩乐</span>
			</div>
			<div class="blue1">
				<div class="blue_left">
					<img :src="local_ad.banner[0].thumb">
					<span>{{local_ad.banner[0].title}}</span>
				</div>
				<div class="blue_right">
					<div class="blue_top">
						<img :src="local_ad.banner[1].thumb">
						<span>{{local_ad.banner[1].title}}</span>
					</div>
					<div class="blue_top">
						<img :src="local_ad.banner[2].thumb">
						<span>{{local_ad.banner[2].title}}</span>
					</div>
				</div>
			</div>
			<div class="blue2">
				<div class="blue3" v-for='item in local_ad.data'>
					<img :src="item.thumb">
					<p>{{item.product_name}}</p>
					<span>{{item.price_label}}</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		props:['local_ad'],
	}
</script>
<style lang='stylus' scoped>
.wan{
	padding-top: 1rem;
}
	.wanyi{
		width: 100%;
		background-image: url(https://m.youxiake.com/src/static/img/img5.e4b67c9.png);
		background-size: 95%;
		background-position: center center;
		background-repeat:no-repeat;
		color:#fff;
		position: absolute;
		top: -1rem;
		left: 0;
		z-index: 999;
		height: 2.6rem;
		p{
			margin-left: 1rem;
		    padding-top: .65rem;
		    font-size: .55rem;
		    padding-bottom: .15rem;
		}
		span{
			font-size: .37rem;
			margin-left: 1rem;
			display: block;
		}
	}
	.blue{
		width: 100%;
		padding:1.6rem .3rem .28rem;
		background: #b9e4f7;
		position: relative;
	}
	.blue1{
		width: 100%;
		display: flex;
		justify-content: space-between;
		.blue_left{
			width: 67%;
			position: relative;
			img{
				width: 100%;
			}
			span{
				position: absolute;
				color: #fff;
				font-size: .36rem;
				bottom: 10px;
				left: 10px;
			}
		}
		.blue_right{
			width: 32.5%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.blue_top{
				width: 100%;
				position: relative;
				height: 50%;
				img{
					width: 100%;
				}
				span{
					position: absolute;
					color: #fff;
					font-size: .36rem;
					left: .22rem;
					bottom: .2rem;
				}
			}
		}
	}
	.blue2{
		width: 100%;
		display: flex;
		justify-content: space-between;
		.blue3{
			width: 33%;
			background: #fff;
			border-radius: 6px;
			padding-bottom: 6px;
			img{
				width: 100%;
				height: 2.6rem;
			}
			p{
				font-size: .4rem;
				 display: -webkit-box;
	            -webkit-box-orient: vertical;
	            -webkit-line-clamp: 2;
	            overflow: hidden;
	            line-height: 1.5;
	            padding:0 .1rem;
			}
			span{
				font-size: .42rem;
				color: #eb9247;
				padding-left: .1rem;
				display: block;
				margin-top: .1rem
			}
		}
	}
</style>